<template>
    <aside class="myaside">
        <!--个人信息-->
        <div class="web-author bg-color animation-div">
            <div class="author-tx">
                <router-link :to="{name:'About'}" class="img-circle" title="点击查看详细信息">
                    <img class="img-circle" src="../../../static/front-vue/images/personal/headportrait_listening.jpg"/>
                </router-link>               
            </div>
            <div class="author-name"><span class="blue-text">卑微小袁</span>
                <p></p>
            </div>
        </div>
        <!--关注我-->
        <div class="focus-me bg-color animation-div">
            <h4 class="index-title"><i class="el-heart"></i>关注我
                <small>Focus Me</small>
            </h4>
            <div class="xiangguan">
                <div>
                    <a class="benbo"
                    href="mailto:842131145@qq.com" rel="nofollow" target="_blank">
                        <i class="el el-envelope el-spin"></i>
                    </a>
                    <span>邮件</span>
                </div>
                <div>
                    <a class="github" href="https://github.com/YuanHuanghui1" rel="nofollow" target="_blank">
                        <i class="el el-github el-spin"></i>
                    </a>
                    <span>github</span>
                </div>
                <div>
                    <a class="mail-btn" href="javascript:;">
                        <i class="el el-picasa el-spin"></i></a>
                    <span>微信</span>
                </div>
            </div>
            <div class="mail-dy">
                <img src="../../../static/front-vue/images/personal/weixin_small.png">
                <i class="el-remove fx-close"></i>
            </div>
        </div>
        <!--搜索-->
        <div class="search animation-div">
            <form action="" method="get" id="searchForm">
                <div class="search-index">
                    <input name="search_word" id="search_word" type="text" placeholder="请输入关键字"
                        onfocus="this.placeholder=''" v-model="keywords" required pattern="{1,10}"
                        onblur="this.placeholder='请输入关键字'"/>                    
                    <router-link :to="{name:'Blog_By_Keywords',query:{keywords:keywords}}"><i class="el-search"></i></router-link>                   
                </div>               
            </form>
        </div>
        <!--文章排行tab-->
        <div class="mytab bg-color animation-div">
            <h4 class="index-title">
                <i class="el-signal"></i>点击排行
                <small> Article Ranking</small>
            </h4>
            <!-- 这里span样式暂时只设置了前六个，在public.css中以后可以进行完善-->
            <ul class="paihang-ul" style="display: block;">
                <li v-for="blog in rankingBlogsList" :key="blog.blogId">
                    <span></span>
                    <router-link tag="a" :to="{name:'Article',query:{blogId:blog.blogId}}" 
                            :title="blog.title">{{blog.title}}<b>{{blog.click}}</b></router-link>                                       
                </li>                               
            </ul>
        </div>
        <div class="clos-new bg-color animation-div">
            <h4 class="index-title"><i class="el-bulb"></i>最新更新
                <small>Close New</small>
            </h4>
            <ul>
                <li>
                    <i class="el-cloud"></i>
                    <iframe id="tianqi" scrolling="no" frameborder="0" allowtransparency="true"
                            src="http://i.tianqi.com/index.php?c=code&id=34&icon=1&num=3"></iframe>
                </li>
                <li v-for="blog in recentBlogsList" :key="blog.blogId">
                    <span><i class="el-arrow-up"></i>最近：<font class="blue-text">卑微小袁</font>
                        <span v-text="blog.updateTime">{{blog.updateTime}}</span>
                    </span>
                    <router-link tag="a" :to="{name:'Article',query:{blogId:blog.blogId}}" 
                            :title="blog.title">更新了<b class="lable">文章</b></router-link>                   
                </li>
            </ul>
        </div>
        <!--推荐图文-->
        <div class="article-push  bg-color animation-div">
            <h4 class="index-title">
                <i class="el-asl"></i>推荐图文
                <small>Push Article</small>
            </h4>
            <ul>
                <li v-for="blog in supportBlogsList" :key="blog.blogId">
                    <div class="arcimg ">
                        <router-link tag="a" :to="{name:'Article',query:{blogId:blog.blogId}}" 
                            :title="blog.title">
                            <img :src="blog.headerImg" :alt="blog.title">
                        </router-link>                       
                    </div>
                    <div class="arc-right">
                        <h4 class="blue-text">
                            <router-link tag="a" :to="{name:'Article',query:{blogId:blog.blogId}}">{{blog.title}}</router-link>               
                        </h4>
                        <p>{{blog.summary}}</p>
                        <ul>
                            <li>
                                <a :title="blog.creatTime">
                                    <i class="el-time"></i>
                                    <span>{{blog.createTime}}</span>
                                </a>
                            </li>
                            <li>
                                <a :title="blog.click + '次浏览'">
                                    <i class="el-fire"></i>
                                    <span>{{blog.click}}</span> 
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
        <!--标签-->
        <div class="cloud bg-color animation-div">
            <h4 class="index-title"><i class="el-tags"></i>标签云
                <small>Tags Clouds</small>
            </h4>
            <ul id="3dcloud">
                <li v-for="(tag,count) in tagsList" :key="tag.tagId">
                    <!--标签搜索也属性关键字搜素一部分，一起做-->                   
                    <router-link :to="{name:'Blog_By_Keywords',query:{keywords:tag.tagTitle}}"
                        :class="'tstyle-1'+count%4+1" :title="'标签：'+tag.tagTitle">{{tag.tagTitle}} ({{tag.count}})</router-link> 
                </li>               
            </ul>
        </div>
        <!--友情链接-->
        <div class="side-link ">
            <h4 class="index-title"><i class="el-paper-clip"></i>友情链接
                <small>Friend Links</small>
                <a href=""><i
                        class="el el-plus"></i>申请</a></h4>
            <ul>
                <li v-for="(link,count) in linksList" :key="link.linkId">
                    <a :class="'tstyle-1'+(count+1)%5" :href="link.url" target="_blank" 
                    :title="link.title">{{link.title}}</a>
                </li>
            </ul>
        </div>
        <!--文章目录-->
        <div class="directory mob-hidden " id="Catalog_box">
            <h4 class="index-title"><i class="el-paper-clip"></i>文章目录
                <small> Article Directory</small>
            </h4>
            <div style="width: 300px;" class="">
                <div id="toolbar">
                    <div id="toolbar-c"></div>
                </div>
            </div>
        </div>
    </aside>
</template>

<script>
/*
*自定义title在js初始化的定义，而这边获取数据后要重新渲染页面却不会重新初始化js,
*所以在重新渲染数据后(updated)进行title样式的初始化
*/
import {titleInit,removeMouseMethod} from '../../../static/front-vue/js/showtip';

export default {
    name:'asidely',
    data() {
        return {
            rankingBlogsList:[],
            supportBlogsList:[],
            tagsList:[],
            linksList:[],
            recentBlogsList:[],
            keywords:''
        }
    },
    beforeCreate:function() {
        //this.loadInitialData();
    },
    created: function() {
        this.loadInitialData();
    },
    //updated:只有事先设置好的data改变并且要在页面重新渲染完成之后,才会进updated方法，光改变数据但不渲染页面是不会进的
    updated:function() {
        //渲染完数据进行title样式的自定义
        removeMouseMethod();
        titleInit();
        
    },
    mounted:function() {
        //titleInit();
    },
    methods:{
        //加载侧栏信息
        loadInitialData () {
            var _this = this; 
                     
            this.$axios.get('/mainPage/aside').then(resp => {
                
                if (resp && resp.status === 200) { 
                    //后台传map                   
                    _this.linksList = resp.data.links;   //友链                  
                    _this.rankingBlogsList = resp.data.rankingBlogsList; //文章排行
                    _this.supportBlogsList = resp.data.supportBlogsList; //推荐图文
                    _this.tagsList = resp.data.tags; //标签
                    _this.recentBlogsList = resp.data.recentBlogsList; //最近更新博客
                
                }
                            	
            });
        }

        
    }
}
</script>

<style scoped>

</style>